<%@page import="org.springframework.web.context.request.RequestScope"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html {height: 50% }
  html {width: 20%}
  body {height: 100%; margin: 10px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=true">
</script>
 <script >
 //주소로 좌표를 찾아야 함 
      var geocoder;
      var map;
      var infowindow;
     
      var markers = [];
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(37.6, 127);
        var mapOptions = {
          zoom: 12,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }  
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      
        
        
      }
     	
      function geocode(){    	
    	  var a = document.getElementById("address1");    		
    	  var address = a.innerHTML;  
    	  geocoder.geocode({'address' : address},function(results,status){
    		  if (status == google.maps.GeocoderStatus.OK) {
    	            map.setCenter(results[0].geometry.location); 
    	            var marker = new google.maps.Marker({
    	                map: map,
    	                position: results[0].geometry.location
    	            });	          
    	          } else {
    	            alert('정상적으로 할수 없습니다.: ' + status);
    	          }
    	        });
    	      }
    	  
      
      function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
          } else {
            alert('정상적으로 할수 없습니다.: ' + status);
          }
        });
      }
    	


    </script>
</head>
<body onload="initialize()">


<div id="address1">
<c:forEach items="${requestScope.map }" var="entry">
	<c:if test="${entry.key=='address' }">
	${entry.value.sido } ${entry.value.gugun } ${entry.value.dong } ${entry.value.bunji }
	</c:if>
</c:forEach>
</div> 
    <div>
      <input id="address" type="textbox" value="서울">
      <input type="button" value="Search" onclick="codeAddress()">
      <input type="button" value="SearchAddress" onClick="geocode()">      
    </div>
    <div id="map_canvas" style="height:30%;top:30px"></div>
    
  </body>
</html>